<template>
  <div class="p-6">
    <div class="flex justify-between items-center mb-6">
      <div>
        <h1 class="text-3xl font-bold text-gray-900 dark:text-white">评论审核</h1>
        <p class="text-gray-600 dark:text-gray-400 mt-2">审核和管理用户评论</p>
      </div>
    </div>

      <!-- 筛选 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4 mb-6">
        <div class="flex gap-4">
          <button
            v-for="status in statusOptions"
            :key="status.value"
            @click="selectedStatus = status.value; loadReviews()"
            :class="[
              'px-4 py-2 rounded-lg transition-colors',
              selectedStatus === status.value
                ? 'bg-blue-600 text-white'
                : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
            ]"
          >
            {{ status.label }}
          </button>
        </div>
      </div>

      <!-- 评论列表 -->
      <div class="space-y-4">
        <div
          v-for="review in reviews"
          :key="review.id"
          class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6"
        >
          <div class="flex justify-between items-start">
            <div class="flex-1">
              <div class="flex items-center gap-2 mb-2">
                <span class="font-semibold text-gray-900 dark:text-white">{{ review.user?.nickname || review.user?.email }}</span>                              
                <span class="text-sm text-gray-500 dark:text-gray-400">评价了</span>                                                                          
                <span class="text-blue-600">{{ review.tool?.name }}</span>      
              </div>
              <div class="flex items-center gap-2 mb-2">
                <div class="flex">
                  <Icon v-for="i in 5" :key="i"
                    :name="i <= review.rating ? 'heroicons:star-solid' : 'heroicons:star'"                                                                      
                    class="w-4 h-4"
                    :class="i <= review.rating ? 'text-yellow-400' : 'text-gray-300 dark:text-gray-600'"                                                        
                  />
                </div>
                <span class="text-sm text-gray-500 dark:text-gray-400">{{ review.rating }}.0 分</span>                                                          
              </div>
              <p class="text-gray-700 dark:text-gray-300 mt-2">{{ review.content }}</p>                                                                         
              <div class="flex items-center gap-4 mt-3 text-sm text-gray-500 dark:text-gray-400">                                                               
                <span>👍 {{ review.helpfulCount }}</span>
                <span>👎 {{ review.notHelpfulCount }}</span>
                <span>{{ formatDate(review.createdAt) }}</span>
              </div>
            </div>
            <div class="flex flex-col gap-2 ml-4">
              <button
                v-if="review.status === 'pending'"
                @click="approveReview(review)"
                class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 text-sm"                                                                 
              >
                批准
              </button>
              <button
                v-if="review.status === 'pending'"
                @click="rejectReview(review)"
                class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 text-sm"                                                                     
              >
                拒绝
              </button>
              <span
                v-if="review.status !== 'pending'"
                :class="{
                  'text-green-600': review.status === 'approved',
                  'text-red-600': review.status === 'rejected',
                }"
                class="text-sm font-medium"
              >
                {{ getStatusLabel(review.status) }}
              </span>
            </div>
          </div>
        </div>
      </div>

      <!-- 分页 -->
      <div v-if="totalPages > 1" class="flex justify-center items-center gap-2 mt-8">
        <button
          @click="prevPage"
          :disabled="currentPage === 1"
          class="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50 dark:hover:bg-gray-700"
        >
          上一页
        </button>
        
        <div class="flex gap-2">
          <button
            v-for="page in totalPages"
            :key="page"
            @click="goToPage(page)"
            :class="[
              'px-4 py-2 rounded-lg border',
              currentPage === page
                ? 'bg-blue-600 text-white border-blue-600'
                : 'border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700'
            ]"
          >
            {{ page }}
          </button>
        </div>
        
        <button
          @click="nextPage"
          :disabled="currentPage === totalPages"
          class="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50 dark:hover:bg-gray-700"
        >
          下一页
        </button>
      </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

definePageMeta({
  layout: 'admin',
  middleware: ['auth'],
})

const $api = useNuxtApp().$api
const toast = useToast()

const reviews = ref<any[]>([])
const selectedStatus = ref('pending')
const currentPage = ref(1)
const pageSize = ref(20)
const total = ref(0)
const totalPages = ref(0)

const statusOptions = [
  { label: '待审核', value: 'pending' },
  { label: '已批准', value: 'approved' },
  { label: '已拒绝', value: 'rejected' },
]

onMounted(() => {
  loadReviews()
})

const loadReviews = async () => {
  try {
    const result = await $api('/reviews', {
      params: {
        status: selectedStatus.value,
        page: currentPage.value,
        limit: pageSize.value,
      },
    }) as any
    reviews.value = result.data
    total.value = result.total
    totalPages.value = result.totalPages || Math.ceil(result.total / result.limit)
  } catch (error) {
    console.error('加载评论失败:', error)
  }
}

const goToPage = (page: number) => {
  currentPage.value = page
  loadReviews()
}

const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--
    loadReviews()
  }
}

const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++
    loadReviews()
  }
}

const approveReview = async (review: any) => {
  try {
    await $api(`/reviews/${review.id}/approve`, { method: 'PATCH' })
    toast.success('已批准')
    loadReviews()
  } catch (error) {
    toast.error('操作失败')
  }
}

const rejectReview = async (review: any) => {
  try {
    await $api(`/reviews/${review.id}/reject`, { method: 'PATCH' })
    toast.success('已拒绝')
    loadReviews()
  } catch (error) {
    toast.error('操作失败')
  }
}

const getStatusLabel = (status: string) => {
  const labels: any = {
    pending: '待审核',
    approved: '已批准',
    rejected: '已拒绝',
  }
  return labels[status] || status
}

const formatDate = (date: string) => {
  return new Date(date).toLocaleDateString('zh-CN')
}
</script>




